<template>
	<view class="bj">
		
	
	<view class="container page">
	  <view class="panel">
	    <view class="header">请扫描以下任意二维码或条形码</view>
	    <view class="barcode">
	      <canvas canvas-id="barcode" id="barcode"/>
		  <view class="barnum">{{code}}</view>
	    </view>
	    <view class="qrcode">
	      <canvas canvas-id="qrcode" id="qrcode"/>
	    </view>
	  </view>
	</view>
	<view class="title">
		<view class="m-c-a" v-for="item in title" :key="item._id">
			<view class="m-c-a-img">	
				<image :src="item.icon" class="m-c-a-img-1"></image>
			</view>
			<navigator url="/pages/myAssets/myAssets">
			<view class="m-c-a-text">
				{{item.title}}
			</view>
			</navigator>
			<view class="m-c-a-img-right"></view>
		</view>
	</view>
	</view>
</template>

<script>
import CODE  from '@/utils/common/wmf.code.min.js';
export default {
	data() {
		return {
			
			code: parseInt(Math.pow(10,14)*Math.random())+"",
			title:[
				{"icon":"../../static/image/skm.png",
					"title":"收钱"
				},
				{"icon":"../../static/image/ccm.png",
					"title":"乘车码"
				},
				{"icon":"../../static/image/hbfq.png",
					"title":"花呗分期"
				},
				{"icon":"../../static/image/syb.png",
					"title":"刷医保"
				}
			]
		}
	},
	onReady() {
		//条形码
		CODE.BarCode({
			id: 'barcode',// canvas 的canvas-id
			code: this.code,// 生成条形码的字符串
			color: '#000',// 条形码的颜色
			bgColor: '#FFFFFF',// 背景色
			width: 300,// 宽度
			height: 100// 高度
		});
		CODE.QRCode({
			id: 'qrcode',// canvas的canvas-id
			code: this.code,//生成二维码的字符串
			size: 210,// 二维码大小
			level: 4,//等级 0～4
			img: require('@/static/picture_qidongye_logo@2x.png'),//图片
			iconSize: 40,//二维码图标的大小
			color: 'black'// 二维码颜色 默认黑色
		});
	},
	methods: {
		async hello(){
			const res = await qrcode.SaveCode('qrcode',210,210) // 保存二维码图片
			console.log(res)
		}
	}
};
</script>
<style scoped lang="scss">
page{
	background-color: red;
}
.bj{
	background-color: #1778E6;
	height: 100vh;
}
.page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container {
	padding-bottom: 10rpx;
}

.panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;
    width: 710rpx;
    margin-top: 100rpx;
    border-radius: 10rpx;
    background-color: #fff;
}

.header {
    height: 140rpx;
    background-color: #f0f0f0;
    border-radius: 10rpx 10rpx 0 0;
	text-align: center;
	line-height: 140rpx;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 40rpx;
	color: #1b82d2;
}

.barcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.barnum {
    width: 670rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 38rpx;
    font-weight: bold;
    text-align: center;
    letter-spacing: 5rpx;
    white-space: nowrap;
}

.barcode {
    width: 680rpx;
    height: 200rpx;  
	background-color: #fff;
}

.qrcode {
    height: 420rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
#qrcode{
    width: 420rpx;
    height: 420rpx;
	background-color: #fff;
}
.m-c-a{
		width: 670rpx;
		height: 96rpx;
		// border: 1rpx solid;
		border-bottom: 2rpx solid  #EAEDF4;
		display: flex;
		margin: 0 auto;
	}
	.m-c-a-img{
		width: 48rpx;
		height: 48rpx;
		margin-top: 24rpx;
		.m-c-a-img-1{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.m-c-a-text{
		height: 48rpx;
		width: 560rpx;
		line-height: 48rpx;
		color: white;
		font-size: 32rpx;
		margin-left: 16rpx;
		margin-top: 24rpx;
	}
	.m-c-a-img-right{
		width: 25rpx;
		height: 25rpx;
		border-top: 2rpx solid white;
		border-right: 2rpx solid white;
		transform:rotate(45deg);
		margin-top: 30rpx;
	}
	.m-b{
		margin: 0 auto;
		width: 670rpx;
		height: 50rpx;
		font-size: 20rpx;
		color: #989898;
		text-align: center;
		margin-top: 170rpx;
	}
</style>
